<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        text-align: center;
        margin-top: 100px;
    }
    #clock{
        border : 1px solid #ccc;
    }
    
    </style>
</head>
<body>
    <div>
        <canvas id="clock" height="500px" width="500px"></canvas>
    </div>

    <script type = "text/javascript">
     const  dom = document.getElementById('clock');
     const  ctx = dom.getContext('2d'); //getContext返回一个用于在画布上绘图的环境
     console.log(ctx);
     const width = ctx.canvas.width;
     const height = ctx.canvas.height;
     const r = width / 2;
     const rem = width / 200;

     function drawBackground(){
            ctx.save();
            ctx.translate(r, r);
            ctx.beginPath();
            ctx.lineWidth = 10 * rem;
            ctx.arc(0, 0, r-ctx.lineWidth / 2, 0, 2 * Math.PI, false);
            ctx.stroke();

           let hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
           ctx.font = 18 * rem +'px Arial';
           ctx.textAlign = 'center';
           ctx.textBaseline="middle";
           hourNumbers.forEach(function(number,i){
              let rad = 2 * Math.PI / 12 * i;
              let x =Math.cos(rad) * (r - 30 * rem);
              let y =Math.sin(rad) * (r - 30 * rem);
              ctx.fillText(number,x,y);
           })

           for(let i = 0 ; i < 60 ;  i ++){
               let rad = 2 * Math.PI / 60 * i;
               let x =Math.cos(rad) * (r -18 * rem);
               let y =Math.sin(rad) * (r -18 * rem);
               ctx.beginPath();
               if(i % 5 ==0){
                   ctx.fillStyle = '#000';
                   ctx.arc(x, y, 2, 0, 2*Math.PI, false);
               }else{
                   ctx.fillStyle = '#ccc';
                   ctx.arc(x, y, 2, 0, 2*Math.PI, false);
               }
               ctx.fill();
           }

     }
     
     function drawHour(hour,minute){
         ctx.save();
         ctx.beginPath();
         let rad = 2 * Math.PI / 12 * hour;
         let mrad = 2 * Math.PI / 12 / 60 * minute;
         ctx.rotate(rad + mrad);
         ctx.lineWidth = 6 * rem;
         ctx.lineCap = 'round';
         ctx.moveTo(0, 10 * rem);
         ctx.lineTo(0, -r /2);
         ctx.stroke();
         ctx.restore();
     }

     function drawMinute(minute){
        ctx.save();
         ctx.beginPath();
         let rad = 2 * Math.PI / 60 * minute;
         ctx.rotate(rad);
         ctx.lineWidth = 3 * rem;
         ctx.lineCap = 'round';
         ctx.moveTo(0, 10 * rem);
         ctx.lineTo(0, -r + 30 * rem);
         ctx.stroke();
         ctx.restore();
     }

     function drawSecond(second){
        ctx.save();
         ctx.beginPath();
         ctx.fillStyle = '#c14543';
         let rad = 2 * Math.PI / 60 * second;
         ctx.rotate(rad);
         ctx.moveTo(-2,20 * rem);
         ctx.lineTo(2, 20 * rem);
         ctx.lineTo(1, -r + 18 * rem);
         ctx.lineTo(-1, -r + 18 * rem);
         ctx.fill();
         ctx.restore();
     }

     function drawDot(){
         ctx.beginPath();
         ctx.fillStyle = '#fff';
         ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
         ctx.fill();
     }

     
     function draw(){
        ctx.clearRect(0, 0, width, height);
        let now = new Date();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();
        drawBackground();
        drawHour(hour,minute);
        drawMinute(minute);
        drawSecond(second);
        drawDot();
        ctx.restore();
     }
     draw();
     setInterval(draw,1000);
    </script>
</body>
</html>